<template>
  <div id="home">
    <div class="home-top">
      <div class="home-top-content">
        <div class="home-left">
          <div class="home-l1">竞赛·角逐未来</div>
          <div class="home-l2">计算机技术、大数据、人工智能技术挑战，成就未来的您</div>
          <div class="search-home">
            <el-input v-model="form.keyword">
              <template slot="prepend">
                <el-button @click="searchList(0)" slot="append" icon="el-icon-search"></el-button>
              </template>
            </el-input>
          </div>
        </div>
        <div class="home-right">
          <img src="@/assets/images/home-right.png" alt="" />
        </div>
      </div>
    </div>
    <div class="home-main">
      <div class="home-tab">
        <div>状态：</div>
        <div @click="searchAll" :class="{ active: form.matchStatus == '' }">全部</div>
        <div @click="searchList(tab.notStart)" v-if="tab.notStartPageSize"
          :class="{ active: form.matchStatus == tab.notStart }">
          {{ tab.notStartName }}
        </div>
        <div @click="searchList(tab.inProcessStatus)" v-if="tab.inProcessPageSize"
          :class="{ active: form.matchStatus == tab.inProcessStatus }">
          {{ tab.inProcessName }}
        </div>
        <div @click="searchList(tab.endingStatus)" v-if="tab.endingPageSize"
          :class="{ active: form.matchStatus == tab.endingStatus }">
          {{ tab.endingName }}
        </div>
      </div>
      <div class="jx-content">
        <div v-if="list.length" class="home-list">
          <div @click="toDetails(item.courseId)" v-for="(item, index) in list" :key="index">
            <div class="list-icon">
              <img :src="item.iconPath" alt="" />
            </div>
            <div class="list-right">
              <div class="list-title">
                <div>{{ item.name }}</div>
                <div v-if="item.matchType == 1" class="list-type lt1">计时赛</div>
                <div v-if="item.matchType == 2" class="list-type lt2">模拟赛</div>
                <div v-if="item.matchType == 3" class="list-type lt3">自由练习</div>
                <div v-if="item.isOwn" class="own">(已参赛)</div>
              </div>
              <div class="list-content">{{ item.introduction }}</div>
              <div class="list-num">
                <div>已报名人数:{{ item.applyNumber }}</div>
                <div v-if="item.form == 1" class="list-persontype lp2">个人赛</div>
                <div v-if="item.form == 2" class="list-persontype lp1">小组赛</div>
              </div>
            </div>
            <div class="join-type">
              <span v-if="item.matchStatus == 1 && item.notStartStatus == 1">未开始</span>
              <span v-if="item.matchStatus == 1 && item.notStartStatus == 0">报名中</span>
              <span v-if="item.matchStatus == 2">进行中</span>
              <span v-if="item.matchStatus == 3">已结束</span>
            </div>
          </div>
        </div>
        <div v-else class="nodata-muban">暂无数据</div>
        <el-pagination v-if="list.length" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-size="pagesize" background layout="prev, pager, next" :total="totalCount">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      roleId: "",
      tab: {
        endingStatus: 0,
        endingName: "",
        endingPageSize: 0,

        inProcessStatus: 0,
        inProcessName: "",
        inProcessPageSize: 0,

        notStart: 0,
        notStartName: "",
        notStartPageSize: 0,
      },
      form: {
        keyword: "",
        matchStatus: "",
        pageNumber: 1,
        pageSize: 10,
      },
      pagesize: 10,
      currentPage: 1,
      totalCount: 0,
      list: [],
    };
  },
  created() {
    this.roleId = this.$store.state.user.roles[0];
    this.init();
  },
  methods: {
    init() {
      this.getTab();
      this.getList();
    },
    toDetails(courseId) {
      this.$router.push({
        path: "SignUp",
        query: {
          courseId,
        },
      });
    },
    //搜索
    searchList(type) {
      if (type) {
        this.form.matchStatus = type;
      }
      console.log(this.form);
      this.form.pageNumber = 1;
      this.getList();
    },
    //搜索全部
    searchAll() {
      this.form.matchStatus = "";
      this.form.pageNumber = 1;
      this.getList();
    },
    //获取导入数据
    getList() {
      this.$http
        .post("/tes/match/index", this.form)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            console.log(res.data);
            this.list = res.data.records;
            this.pagesize = res.data.size;
            this.currentPage = res.data.current;
            this.totalCount = res.data.total;
            console.log(this.tableData, 22);
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取导入数据
    getTab() {
      this.$http
        .get("/tes/match/index/status")
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            this.tab = res.data;
            console.log(this.tab, 234);
            this.getList();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //分页
    handleSizeChange(size) {
      this.pagesize = size;
    },
    handleCurrentChange(currentPage) {
      this.form.pageNumber = currentPage;
      this.init();
    },
  },
};
</script>
<style lang="scss">
#home {
  .home-top {
    height: 315px;
    background: #fff;
    box-sizing: border-box;
    padding-top: 42px;

    .home-top-content {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;

      .home-left {
        width: 588px;

        .home-l1 {
          font-size: 41px;
          font-family: PingFang SC;
          font-weight: 800;
          color: #090103;
          margin: 46px 0 18px;
        }

        .home-l2 {
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: 300;
          color: #090103;
          margin-bottom: 43px;
        }

        .search-home {
          .el-input-group__prepend {
            background: #fff;
          }

          .el-input__inner {
            width: 100%;
            height: 46px;
            line-height: 46px;
          }
        }
      }

      .home-right {
        padding-right: 59px;
      }
    }
  }

  .home-main {
    width: 1200px;
    margin: 27px auto 40px;

    .home-tab {
      display: flex;
      margin-bottom: 24px;

      >div {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        padding: 0 12px;
        height: 24px;
        line-height: 24px;
        margin-right: 20px;
        cursor: pointer;

        &:first-child {
          margin-right: 0;
        }

        &.active {
          color: #fff;
          background: #4a90e2;
          border-radius: 4px;
        }
      }
    }

    .home-list {
      >div {
        cursor: pointer;
        position: relative;
        display: flex;
        height: 184px;
        padding: 20px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #F0EDF1;

        &:hover {
          transition: .5s;
          background: #f0f0f0;
        }

        .list-icon {
          height: 100%;
          margin-right: 20px;

          img {
            width: 180px;
            height: 100%;
          }
        }

        .list-right {
          width: 100%;

          .list-title {
            display: flex;
            align-items: center;
            .own{
              color:#666;
              font-weight:normal;
              font-size:14px;
              margin-left:10px;
            }
            &:first-child {
              font-size: 18px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #171717;
              cursor: pointer;

              &:hover {
                opacity: 0.9;
              }
            }

            .list-type {
              padding: 0 8px;
              height: 22px;
              line-height: 22px;
              font-size: 14px;
              text-align: center;
              color: #fff;
              margin-left: 10px;
              font-weight: normal;

              &.lt1 {
                background: #13b5b1;
              }

              &.lt2 {
                background: #eb6100;
              }

              &.lt3 {
                background: #295ef6;
              }
            }
          }

          .list-content {
            height: 84px;
            overflow: hidden;
          }

          .list-num {
            display: flex;
            align-items: center;

            >div {
              &:first-child {
                margin-right: 10px;
              }

              &.list-persontype {
                width: 43px;
                height: 16px;
                line-height: 16px;
                text-align: center;
                font-size: 12px;

                &.lp1 {
                  color: rgb(221, 29, 111);
                  background: rgba(221, 29, 111, 0.15);
                  border: 1px solid #dd1d6f;
                }

                &.lp2 {
                  color: rgb(249, 160, 80);
                  background: rgba(249, 160, 80, 0.15);
                  border: 1px solid #f9a050;
                }
              }
            }
          }
        }

        .join-type {
          position: absolute;
          top: 20px;
          right: 20px;
          border: 1px solid #2932e1;
          color: #2932e1;
          padding: 0 14px;
          line-height: 24px;
        }
      }
    }

    .el-pagination {
      padding-right: 0;

      .btn-prev,
      .btn-next {
        background: #fff;

        &:disabled {
          background: #f4f4f5;
        }
      }

      .el-pager {
        li {
          background: #fff;

          &.active {
            color: #1277eb;
          }
        }
      }
    }
  }
}
</style>
